{% extends "_base.html" %}
{% block title %}{{ super() }} {{ data['id'] }} {% endblock %}
{% block extrahead %}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <style>
        #records-map {
            height: 350px;
        }
    </style>

{% endblock %}

{% block crumbs %}
{{ super() }} /
<a href="{{ config['server']['url'] }}/collections">Collections</a> /
<a href="{{ config['server']['url'] }}/collections/{{ data['collection'] }}">{{ data['title'] }}</a> /
<a href="{{ config['server']['url'] }}/collections/{{ data['collection'] }}/items">Items</a> /
<a href="{{ config['server']['url'] }}/collections/{{ data['collection'] }}/items/{{ data['id'] }}">{{ data['id'] }}</a>
{% endblock %}
{% block body %}

<section id="item">

<h2>{{ data['id'] }}</h2>

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <div id="records-map"></div>
    </div>
    <div class="col-lg-6">
      <table class="table table-striped table-hover" id="items-table-table">
        <thead>
          <tr>
            <th>Property</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          {% if 'properties' in data %}
            {% for key, value in data['properties'].items() %}
            <tr>
              <td>{{ key }}</td>
              {% if key == 'keywords' %}
                <td>
                  <ul>
                  {% for keyword in value %}
                    <li>{{ keyword }}</li>
                  {% endfor %}
                  </ul>
                </td>

              {% elif key == 'themes' %}
                <td>
                {% for theme in value %}
                  <b>{{ theme['scheme'] }}</b>
                  <ul>
                  {% for concept in theme['concepts'] %}
                    <li>
                      {% if concept['url'] %}
                        <a href="{{ concept['url'] }}">{{ concept['name'] or concept['url'] }}</a>
                      {% else %}
                        {{ concept['name'] }}
                      {% endif %}
                    </li>
                  {% endfor %}
                  </ul>
                {% endfor %}
                </td>
              {% elif key == 'externalIds' %}
                <td>
                  <ul>
                    {% for id in value %}
                    <li>{{ id['scheme'] | urlize }} {{ id['value'] | urlize }}</li>
                    {% endfor %}
                  </ul>
                </td>
              {% elif key == 'providers' %}
                <td>
                  {% for cnt in data['properties']['providers'] %}
                    {% if 'name' in cnt and cnt['name'] not in [None,''] %}
                      {{ cnt['name'] }} <br/>
                    {% endif %}
                    {% if 'roles' in cnt and cnt['roles'] is not string %}
                    Role: {{ cnt['roles'] | map(attribute='name') | join(',') }} <br/>
                    {% endif %}
                    {% if 'positionName' in cnt and cnt['positionName'] not in [None,''] %}
                    Position: {{ cnt['positionName'] }})<br/>
                    {% endif %}
                    {% if 'contactInfo' in cnt and cnt['contactInfo'] is not string %}
                      {% for k,e in cnt['contactInfo'].get('phone',{}).items() %}
                        {% if e %}{{ k }}: {{ e }}<br/>{% endif %}
                      {% endfor %}
                      {% for k,e in cnt['contactInfo'].get('email',{}).items() %}
                        {% if e not in [None,''] %}{{ k }}: {{ e | urlize }}<br/>{% endif %}
                      {% endfor %}
                      {% for k,e in cnt['contactInfo'].get('address',{}).items() %}
                        {{ k }}: {% for a,b in e.items() %}{% if b %}{{ b }}, {% endif %}{% endfor %}<br/>
                      {% endfor %}
                      {% if cnt['contactInfo']['url'] %}
                        {{ cnt['contactInfo']['url'].get('href','') | urlize }}
                      {% endif %}
                    {% endif %}
                  {% endfor %}
                </td>
              {% else %}
                <td>{{ value }}</td>
              {% endif %}
            </tr>
            {% endfor %}
          {% endif%}
          {% if data['time'] %}
          <tr>
            <td>Temporal</td>
            <td>{{ data['time'] }}</td>
          </tr>
          {% endif %}
          <tr>
            <td>Links</td>
            <td>
              <ul>
                {% for link in data['links'] %}
                  {% if link['name'] %}
                    {% if link['description'] %}
                      <li><a href="{{ link['href'] }}" title="{{ link['description'] }}">{{ link['name'] }}</a></li>
                    {% else %}
                      <li><a href="{{ link['href'] }}" title="{{ link['name'] }}">{{ link['name'] }}</a></li>
                    {% endif %}
                  {% elif link['description'] %}
                    <li><a href="{{ link['href'] }}" title="{{ link['description'] }}">{{ link['description'] }}</a></li>
                  {% else %}
                    <li><a href="{{ link['href'] }}" title="{{ link['rel'] }}">{{ link['rel'] }}</a></li>
                  {% endif %}
                {% endfor %}
              </ul>
          </tr>
          {% if 'assets' in data %}
          <tr>
            <td>Assets</td>
            <td>
              <ul>
                {% for key, value in data['assets'].items() %}
                  {% if value['title'] %}
                    <li><a href="{{ value['href'] }}" title="{{ value['title'] }}">{{ key }}</a></li>
                  {% else %}
                    <li><a href="{{ value['href'] }}" title="{{ key }}">{{ key }}</a></li>
                  {% endif %}
                {% endfor %}
              </ul>
          </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</div>

</section>

{% endblock %}

{% block extrafoot %}
<script>
var map = L.map('records-map').setView([0, 0], 1);
map.addLayer(new L.TileLayer(
    'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
    }
));
var geojson_data = {{ data | to_json }};
var items = new L.GeoJSON(geojson_data);

map.addLayer(items);
var bounds = items.getBounds();
if (bounds.isValid() === true) {
    map.fitBounds(bounds);
}

var highlightStyle = {
    color: 'red',
    dashArray: '',
    fillOpacity: 0.5
}

$(document).ready(function() {
    $('#items-table-table tr').on('mouseenter', function(e){
        id_ = $(this).find('[id]').attr('id');
        layer = items.getLayer(id_); //your feature id here
        if (layer) {
            layer.setStyle(highlightStyle);
        }
    }).on('mouseout', function(e){
        id_ = $(this).find('[id]').attr('id');
        layer = items.getLayer(id_); //your feature id here
        items.resetStyle(layer);
    });
});
</script>
{% endblock %}
